import { Billboard } from "../../types/billboard";
import { useBillboardQueryKey, useSearchTasks } from "./utils";
import styled from "@emotion/styled";
import { CreateTask } from "./CreateTask";
import { TaskCard } from "./TaskCard";
import { ReactComponent as CloseIcon } from "../../assets/close.svg";
import { Row } from "components/lib";
import { useDeleteBillboard } from "../../hooks/useBillboards";
import { Modal } from "antd";
import { Drag, Drop } from "../../components/DragAndDrop";

export const ColumnContainer = styled.div`
  min-width: 27rem;
  border-radius: 6px;
  background-color: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`;

const TaskContainer = styled.div`
  overflow: scroll;
  flex: 1;
  ::-webkit-scrollbar {
    display: none;
  }
`;

export const BillboardColumn = ({ billboard }: { billboard: Billboard }) => {
  const { data: allTasks } = useSearchTasks();
  const tasks = allTasks?.filter((task) => task.kanbanId === billboard.id);
  const { mutateAsync: deleteBillboard } = useDeleteBillboard(
    useBillboardQueryKey()
  );
  const deleteConfirm = () => {
    Modal.confirm({
      title: "确认删除看板吗？",
      okText: "确认",
      cancelText: "取消",
      onOk() {
        return deleteBillboard({ id: billboard.id });
      },
    });
  };

  return (
    <ColumnContainer>
      <Row between={true}>
        <h3>{billboard.name}</h3>
        <CloseIcon
          style={{ width: "2.4rem", height: "2.4rem", cursor: "pointer" }}
          onClick={deleteConfirm}
        />
      </Row>
      <TaskContainer>
        <Drop
          droppableId={"kanban-" + billboard.id}
          type="ROW"
          direction="vertical"
          style={{ minHeight: "1rem" }}
        >
          {tasks?.map((task, index) => (
            <Drag
              draggableId={"task-" + task.id}
              index={index}
              key={task.id || "optimistic"}
            >
              <TaskCard task={task} />
            </Drag>
          ))}
        </Drop>
        <CreateTask kanbanId={billboard.id} key="createTask" />
      </TaskContainer>
    </ColumnContainer>
  );
};
